﻿<script setup lang="ts" name="TagActions">
import useScrollPosition from '@/hooks/scrollPosition'
import useScrollListener from '@/hooks/scrollListener'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { useTagCacheStore } from '@/store/storage/tagCacheStore'
import useRefreshPage from '@/hooks/refreshPage'
import { getListData } from '@/api/list'
const route = useRoute()
const router = useRouter()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const tagCacheStore = useTagCacheStore()
// 滚动行为
useScrollPosition(route)

// 滚动监听事件
useScrollListener(route)

const { refreshPage } = useRefreshPage(route, router)

const initData: any = ref()
const pageIndex = ref(1)
const pageSize = ref(20)
const getInitData = () => {
  getListData({ pageIndex: pageIndex.value, pageSize: pageSize.value }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      initData.value = res.data
    }
  })
}
getInitData()
</script>

<template>
  <el-space :size="systemConfig.space" fill>
    <el-row :gutter="systemConfig.space">
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>标签页操作</span>
            </div>
          </template>
          <el-button @click="tagCacheStore.deleteDynamicTag(route, router, route.fullPath, 'all')">关闭所有</el-button>
          <el-button @click="tagCacheStore.deleteDynamicTag(route, router, route.fullPath, 'left')">关闭左侧</el-button>
          <el-button @click="tagCacheStore.deleteDynamicTag(route, router, route.fullPath, 'right')">关闭右侧</el-button>
          <el-button @click="tagCacheStore.deleteDynamicTag(route, router, route.fullPath, 'other')">关闭其它</el-button>
          <el-button @click="tagCacheStore.deleteDynamicTag(route, router, route.fullPath)">关闭当前</el-button>
          <el-button @click="refreshPage()">刷新当前</el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="systemConfig.space">
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>标签页多开</span>
            </div>
          </template>
          <div class="list-wrap">
            <div class="item-wrap" v-for="(item, index) in initData" :key="index">
              <div class="item-title">
                <router-link :to="'/Functions/Tabs/Detail/' + item.id">{{ item.title }}</router-link>
              </div>
              <div class="item-tag">
                <el-tag v-for="(item1, idx) in item.tags" :key="idx" type="info">{{ item1 }}</el-tag>
              </div>
              <div class="item-des">{{ item.description }}</div>
              <div class="item-info">
                <div class="item-num">
                  <el-link :underline="false">
                    <svg-icon class="el-icon--left" icon="ri:heart-fill"></svg-icon>
                    {{ item.like }}
                  </el-link>
                  <el-link :underline="false">
                    <svg-icon class="el-icon--left" icon="ri:bookmark-3-fill"></svg-icon>
                    {{ item.collect }}
                  </el-link>
                  <el-link :underline="false">
                    <svg-icon class="el-icon--left" icon="ri:chat-2-fill"></svg-icon>
                    {{ item.message }}
                  </el-link>
                </div>
                <div class="item-date">{{ item.date }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  display: block;
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-form {
  display: flex;
}

.list-wrap {
  width: 100%;

  .item-wrap {
    border-bottom: 1px solid var(--el-border-color-lighter);

    .item-title {
      font-size: var(--el-font-size-medium);
      line-height: 1.5;

      &:hover {
        color: var(--el-color-primary);
      }
    }

    .item-tag {
      margin: 0 -5px;

      .el-tag {
        margin: 5px;
      }
    }

    .item-des {
      color: var(--el-text-color-placeholder);
      line-height: 1.5;
    }

    .item-info {
      display: flex;
      padding: 5px 0 10px;

      .item-num {
        flex: 1;

        .el-link {
          padding-right: 15px;
          color: var(--el-text-color-placeholder);
        }

        .el-link+.el-link {
          padding-left: 15px;
          border-left: 1px solid var(--el-border-color-light);
        }
      }

      .item-date {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  .item-wrap+.item-wrap {
    margin-top: 20px;
  }
}
</style>
